<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Zqz_loadLoad实现</title>
</head>

<body>
    <div style="width: 100px;height: 1000px"></div>
    <img src="图1" data-src='./img/1.jpg' width="300px" height="300px" />
    <img src="图2" data-src='./img/2.png' width="300px" height="300px" />
    <img src="图3" data-src='./img/3.png' width="300px" height="300px" />
    <img src="图4" data-src='./img/4.png' width="300px" height="300px" />
    <img src="图5" data-src='./img/5.png' width="300px" height="300px" />
</body>
<script type="text/javascript">
window.onload = function(e) {
    zlazyLoad()
}

function zlazyLoad() {
    var doms = document.querySelectorAll('img[data-src]');

    doms.forEach(function(node) {
        var rect = node.getBoundingClientRect(),
            viewHeight = document.documentElement.clientHeight;

        if (node.getAttribute('data-src') === '') return;

        if (rect.top < viewHeight && rect.bottom >= 0) {
            console.log('show')
            var src = node.getAttribute('data-src');
            console.log(src)
            node.setAttribute('src', src)
        }
    })
}

//谷歌下的滚动监听
document.addEventListener('mousewheel', function(e) {
    console.log(e.wheelDelta)
    zlazyLoad();
}, false)

//火狐下的滚动监听
document.addEventListener('DOMMouseScroll',function (e) {
	console.log(e.wheelDelta)
},false)
</script>

</html>